<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebRTC capture video and audio</title>
    <style>
        .none {
            -webkit-filter: none;
        }
        .blur {
            -webkit-filter: blur(5px);
        }
        .grayscale {
            -webkit-filter: grayscale(100%);
        }
        .invert {
            -webkit-filter: invert(100%);
        }
        .sepia {
            -webkit-filter: sepia(100%);
        }
    </style>
</head>
<body>
    <section>
        <table>
            <tr>
                <td>
                    <video autoplay playsinline id="videoPlayer"></video>
                </td>
                <td>
                    <video playsinline id="RecordPlayer"></video>
                </td>
                <td>
                    <div id="constraints" class="output"></div>
                </td>
            </tr>
            <tr>
                <td><button id="record">Start Record</button></td>
                <td><button id="recordPlay" disabled>Play</button></td>
                <td><button id="download" disabled>Download</button></td>
            </tr>
        </table>
    </section>

    <div>
        <label>audio input device:</label>
        <select id="audioInput"></select>
    </div>
    <div>
        <label>audio output device:</label>
        <select id="audioOutput"></select>
    </div>
    <div>
        <label>video input device:</label>
        <select id="videoInput"></select>
    </div>

    <div>
        <button id="snapshot">Take snapshot</button>
    </div>
    <div>
        <label>Filter:</label>
        <select id="filter">
            <option value="none">None</option>
            <option value="blur">blur</option>
            <option value="grayscale">Grayscale</option>
            <option value="invert">Invert</option>
            <option value="sepia">sepia</option>
        </select>
    </div>
    <div>
        <canvas id="picture"></canvas>
    </div>
    <script src="./client.js"></script>
</body>
</html>